	<script type="text/javascript">
		    function getCityOfState(value) {
				$.ajax({
					url: "<?php echo $link_app;?>",
					data: "stateid="+value,					
					success: function(msg) {
						 clearAll();
						 if (msg != ''){
						 	$(msg).appendTo('#city_id');
						 } else {
							$('<option value="0">----------</option>').appendTo('#city_id');
						 }
					}
				});	
			}
	        function clearAll() {
	        	var obj = document.getElementById('city_id');
	        	for (var i=obj.options.length; i>0 ; i--) {
	        		obj.remove(0);
	        	}
        	}
		    function checkExist1(value) {
				$.ajax({
					url: "<?php echo $link_app2;?>",
					data: "username1="+value,					
					success: function(msg) {
						$(msg).appendTo('#msg_exist');
						alert (msg);
					}
				});	
			}
	    </script>	
	    
	<div class="container register">
		<?php echo $regHeader;?>		
		
		
		<form id="registerForm" method="post">
			<div class="tab-2-container profile">
				<div class="left-profile">
					<h4>Photo</h4>
					<div class="avatar">
						<?php echo $photoURL;?>
					</div>
					
				</div>
				
				<div class="right-profile">
					
					<h4>Account Information</h4>

					<table width="100%" class="tb-profile-field">
						<tr>
							<td width="30%">Username: <font color="#ea0105">(*)</font></td>
							<td width="70%">
							<input type="text" class="text required search-textbox " value="<?php echo $userDto->username; ?>" name="username" id="username" onblur="checkExist(this.value)" />
							<span><label id="msg_exist" name="msg_exist"></<label></span>
							<div class="msg arror"><?php echo $msg; ?></div>
							</td>
						</tr>
						<tr>
							<td>Password: <font color="#ea0105">(*)</font></td>
							<td><input type="password" class="text required " name="password" id="regPassword"/></td>
						</tr>
						<tr>
							<td>Retype Password: <font color="#ea0105">(*)</font></td>
							<td><input type="password" class="text " name="conf_pass" id="conf_pass"/></td>
						</tr>
					</table>
					<hr />

					<h4>Personal Information</h4>
					<table width="100%" class="tb-profile-field">
						<tr>
							<td width="30%">Full name: <font color="#ea0105">(*)</font></td>
							<td width="70%"><input type="text" class="text required  " value="<?php echo $userDto->fullname; ?>" name="fullname" id="fullname" /></td>
						</tr>
						<tr>
							<td>Business name:</td>
							<td><input type="text" class="text" value="<?php echo $userDto->business_name; ?>" name="business_name" id="business_name" /></td>
						</tr>
						<tr>
							<td>Address: <font color="#ea0105">(*)</font></td>
							<td><input type="text" class="text required  " value="<?php echo $userDto->address; ?>" name="address" id="address" /></td>
						</tr>
						<tr>
							<td>State: <font color="#ea0105">(*)</font></td>
							<td><select id="state_id" name="state_id" class="required  " onchange="getCityOfState(this.value);"><option value="">Select a State</option><?php echo $state;?></select></td>
						</tr>
						<tr>
							<td>City: <font color="#ea0105">(*)</font></td>
							<td><select id="city_id" name="city_id" class="required" ><option value="">Select a City</option><?php echo $city;?></select></td>
						</tr>
						<tr>
							<td>Zip Code: <font color="#ea0105">(*)</font></td>
							<td><input type="text" class="text required  " value="<?php echo $userDto->zip_code; ?>" name="zip_code" id="zip_code" /></td>
						</tr>
						<tr>
							<td>Contact Telephone: <font color="#ea0105">(*)</font></td>
							<td><input type="text" class="text required  " value="<?php echo $userDto->contact_tel; ?>" name="contact_tel" id="contact_tel" /></td>
						</tr>
						<tr>
							<td>Work Telephone:</td>
							<td><input type="text" class="text" value="<?php echo $userDto->work_tel; ?>" name="work_tel" id="work_tel" /></td>
						</tr>
						<tr>
							<td>Email Address: <font color="#ea0105">(*)</font></td>
							<td>
								<input type="text" class="text required email  " minlength="4" value="<?php echo $userDto->email; ?>" name="email" id="email" /></td>
						</tr>
						<?php if ($userGroup == GROUP_BUYER) :?>
						<tr>
							<td>Date of birth:</td>
							<td><?php echo $birthdayHtml;?></td>
						</tr>
						<?php endif;?>
						<tr>
							<td colspan="2"><em><font color="#ea0105">(*)</font> are mandatory fields</em></td>
						</tr>
					</table>
					<hr />
					
					<div class="field">
						<input id="readagree" name="readagree" type="checkbox" class="required" checked/><?php SysDBLanguage::printString('I have read and agree to be bound by the Terms &amp; Conditions.'); ?>
					</div>
				</div>
				<div class="clearboth"></div>
				<div class="line-bot">
					<input class="bt-grey" type="button" value="Cancel" onclick="document.location='<?php echo SystemSite::urlRoute('?app=users&act=cancel');?>'"/>
					<input class="bt" type="submit" value="Next" />
					<input type="hidden" name="user_group_code" value="<?php echo $userGroup;?>" />
				</div>
		
				
			</div>
		</form>
	</div>


<script type="text/javascript">
$().ready(function() {
	// validate signup form on keyup and submit
	$("#registerForm").validate({
		rules: {
			username: {
				required: true,
				minlength: 4
			},
			regPassword: {
				required: true,
				minlength: 5
			},
			conf_pass: {
				required: true,
				minlength: 5,
				equalTo: "#regPassword"
			},
			email: {
				required: true,
				email: true
			},
			fullname: {
				required: true
			},
			address: {
				required: true
			},
			zip_code: {
				required: true
			},
			contact_tel: {
				required: true
			},
			state_id: {
				required: true
			},
			city_id: {
				required: true
			},
			readagree: {
				required: true
			}
		},
		messages: {
			username: {
				required: "<?php echo SysLanguage::_('Please enter a username'); ?>",
				minlength: "<?php echo SysLanguage::_('Your username must consist of at least 4 characters');?>"
			},
			regPassword: {
				required: "<?php echo SysLanguage::_('Please provide a password'); ?>",
				minlength: "<?php echo SysLanguage::_('Your password must be at least 5 characters long'); ?>"
			},
			conf_password: {
				required: "<?php echo SysLanguage::_('Please provide a password');?>",
				minlength: "<?php echo SysLanguage::_('Your password must be at least 5 characters long');?>",
				equalTo: "<?php echo SysLanguage::_('Please enter the same password as above');?>"
			},
			email: "<?php echo SysLanguage::_('Please enter a valid email address(Ex:you@yourdomain.com)');?>",
			conf_email: {
				required: "<?php echo SysLanguage::_('Please provide a email');?>",
				equalTo: "<?php echo SysLanguage::_('Please enter the same email as above');?>"
			},
			fullname: "<?php echo SysLanguage::_('Please enter your full name');?>",
			address: "<?php echo SysLanguage::_('Please enter your address');?>",
			zip_code: "<?php echo SysLanguage::_('Please enter your zip code');?>",
			contact_tel: "<?php echo SysLanguage::_('Please enter your contact telephone');?>",
			state_id: "<?php echo SysLanguage::_('Please select state');?>",
			city_id: "<?php echo SysLanguage::_('Please select city');?>",
			readagree: "<?php echo SysLanguage::_('You must read and agree to be bound by the Terms &amp; Conditions.');?>"
		}
	
	});
	
	$("#email").blur(function() {
		$("#conf_email").valid();
	});
	// check if confirm password is still valid after password changed
	$("#password").blur(function() {
		$("#conf_pass").valid();
	});
});


</script>


	